<script setup lang="ts">
import { useComponentCommon } from '@/hooks/useComponentCommon'
import { imageComponentProps, transformToComponentProps, imageStylePropNames } from '@/utils/defaultProps'
import { watchEffect } from 'vue'
defineOptions({
  name: 'LImage'
})
const props = defineProps({
  ...transformToComponentProps(imageComponentProps),
})
const { styleProps, handleClick } = useComponentCommon(props, imageStylePropNames)
// let styleProps = {}
// watchEffect(() => {
//   const obj = useComponentCommon(props, imageStylePropNames)
//   styleProps = obj.styleProps
// })

</script>

<template>
  <img class="l-image-component" @click.prevent="handleClick" :style="styleProps" :src="src" alt="" />
</template>

<style scoped>
.l-image-component {
  max-width: 100%;
  position: relative !important;
} 
</style> 